<template>
  <a-card :title="$t('Subscription List')" class="theme-white">
    <a-table :columns="columns" :data-source="tableData" :pagination="false">
      <template slot="action" slot-scope="text, record">
        <!-- 状态为2并且到期时间expTime小于now js的now（） 在列表咋获取 -->
        <a-button
          type="link"
          @click="cloudWithdrawHandler(record)"
          v-if="record.status == '2' && timeStamp(record.expTime)"
        >
          {{ $t('withdraw') }}
        </a-button>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { cloudMy, cloudWithdraw } from '@/api/cloud'
import { Modal } from 'ant-design-vue'
export default {
  data() {
    return {
      columns: [
        {
          dataIndex: 'userId',
          title: this.$t('Uid')
        },
        {
          dataIndex: 'amount',
          title: this.$t('Amount')
        },
        {
          dataIndex: 'rate',
          title: this.$t('Rate')
        },
        {
          dataIndex: 'status',
          title: this.$t('State'),
          customRender: (text) => {
            if (text === '2') {
              return this.$t('Income')
            } else if (text === '1') {
              return this.$t('Withdrawn')
            }
            return this.$t('Unknown')
          }
        },
        {
          dataIndex: 'createTime',
          title: this.$t('Create time')
        },
        {
          dataIndex: 'expTime',
          title: this.$t('Expiration time')
        },
        {
          dataIndex: 'Operate',
          title: this.$t('Operate'),
          scopedSlots: { customRender: 'action' }
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    timeStamp(expTime) {
      return new Date(expTime).getTime() < new Date().getTime()
    },
    loadData() {
      cloudMy()
        .then((resp) => {
          this.tableData = resp.data
        })
        .catch(() => {})
    },
    cloudWithdrawHandler(record) {
      const vm = this
      Modal.confirm({
        title: this.$t('提示'),
        content: this.$t('Please confirm whether to withdraw cash'),
        onOk() {
          return new Promise((resolve, reject) => {
            cloudWithdraw(record.id)
              .then(() => {
                vm.$notification.success({
                  message: this.$t('提示'),
                  description: this.$t('Withdrawal successful')
                })
                vm.loadData()
                resolve()
              })
              .catch(() => {
                return reject(new Error(''))
              })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
